/*
 * @Author: yangzonglong
 * @Date: 2021-03-12 14:29:19
 * @version: v1.0.0
 * @Descripttion: 多行文本控件
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-30 16:03:48
 * @Auditor:
 */
import React, { useState, useEffect, useImperativeHandle, forwardRef } from 'react';
import { TextareaItem } from 'antd-mobile';
import RequiredMark from './RequiredMark';

const App = (props, ref) => {
  const { disabled, textAreaProps, formItemProps, initialValue } = props;

  const [value, setValue] = useState(null);

  useEffect(() => {
    if (initialValue) setValue(initialValue);
  }, [initialValue]);

  useImperativeHandle(ref, () => ({
    getData: () => value,
  }));

  return (
    <TextareaItem
      disabled={disabled}
      title={
        <span>
          {formItemProps?.required && <RequiredMark />}
          {formItemProps?.label}
        </span>
      }
      autoHeight
      value={value}
      onChange={setValue}
      rows={4}
      placeholder={textAreaProps?.placeholder}
      clear={false}
    ></TextareaItem>
  );
};

export default forwardRef(App);
